<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>折线图：series type=line</title>
  <script src="./echarts.js"></script>
  <script src="./data/AQIData.js"></script>
  <style lang="css">
    #chart1, #chart2 {
      width: 1000px;
      height: 668px;
      border: 1px solid red;
      float: left;
    }
  </style>
</head>
<body>
  <div id="chart1"></div>

  <script>
    const myChart1 = echarts.init(document.getElementById('chart1'));

    myChart1.setOption({
      title: {
        text: 'BeiJing AQI',
      },
      legend: {},
      tooltip: {
        trigger: 'axis', // 折线图要修改触发方式
      },
      toolbox: {
        right: '10%',
        feature: {
          dataZoom: {
            yAxisIndex: 'none'
          },
          restore: {},
          saveAsImage: {},
        }
      },
      dataZoom: [
        {
          type: 'inside',
          start: 0,
          end: 10,
        },
        {
          type: 'slider',
          start: 0,
          end: 10,
        },
      ],
      visualMap: {
        top: 50,
        right: 10,
        type: 'piecewise',
        pieces: [
          { gt: 0, lte: 50, color: '#93CE07' },
          { gt: 50, lte: 100, color: '#FBDB0F' },
          { gt: 100, lte: 150, color: '#FC7D02' },
          { gt: 150, lte: 200, color: '#FD0100' },
          { gt: 200, lte: 300, color: '#AA069F' },
          { gt: 300, color: '#AC3B2A' }
        ],
        outOfRange: {
          color: '#999',
        },
      },
      xAxis: {
        data: AQIData.map((item) => item[0])
      },
      yAxis: {
        splitLine: {
          show: true,
        }
      },
      series: {
        type: 'line',
        name: 'BeiJing AQI',
        coordinateSystem: 'cartesian2d',
        data: AQIData.map((item) => {
          return item[1]
        }),
        // data: ,
        // symbol: 'diamond', // 折线拐点图标
        symbolSize: 10,
        showAllSymbol: true, // 主轴为类目轴才有效，true 显示所有的拐点图标，false 挑着显示一部分，auto 自动计算
        hoverAnimation: true,
        legendHoverLink: true,
        cursor: 'crosshair',
        connectNulls: false,
        step: false,
        label: {
          show: true, // 拐点处的文本标签
          position: 'right',
          distance: 10,
          // offset: [30, 40],
        },
        itemStyle: { // 拐点图标样式
          color: 'teal',
          // borderColor: 'green',
        },
        lineStyle: { // 线条样式
          // color: 'purple',
        },
        areaStyle: {

        },
        emphasis: {
          label: {
            fontSize: 20
          },
        },
        smooth: true, // 线条是否平滑
        // sampling: '',
        markPoint: { // 标注点
          data: [
            { type: 'min' }, // min 标注最小值, max 标注最大值, average 标注平均值
            {
              type: 'max',
              coord: [10, 100], // 表示x轴位置10，但是x轴此时是类目轴，那么10就表示类目轴的下标10；y轴位置100
              coord: ['2000-06-15', 100], // 除了上面，还可以直接给x轴下标为10的类目值，注意此时类目轴必须是字符串不能是数字
              // 使用x和y就和坐标没关系了，表示容器div左上角往右100，往下100的位置
              // x: 100,
              // y: 100,
              value: 'kk',
              symbol: 'diamond'
            },
          ],
          // data外面的是全局设置，里面的是个性化设置
          symbol: 'arrow',
          symbolSize: 40,
          label: {
            color: '#fff'
          },
          itemStyle: {
            color: 'blue',
          },
          emphasis: {
            label: {
              color: '#000'
            },
            itemStyle: {
              color: 'teal',
            },
          }
        },
        markLine: { // 标注线
          data: [
            [ // 第一根线
              { // 起点坐标
                name: '通过x,y属性指定起点坐标',
                x: 50,
                y: 50,
                symbol: 'roundRect',
                symbolSize: 20,
                // 起点终点线的样式，在一个里面设置就行，起点设置了终点就不用了
                lineStyle: {
                  color: 'red'
                },
                label: {
                  show: true,
                  position: 'middle',
                }
              },
              { // 终点坐标
                x: 400,
                y: 400
              }
            ],
            [ // 第二根线
              {
                name: '通过coord属性指定起点和终点',
                coord: [10, 20]
              },
              {
                coord: [400, 400]
              }
            ],
            { // 第三根线
              name: '通过最大值、最小值、平均值、中位线来制定标注线',
              type: 'max', // 可选取值min、max、average、median
            },
            { // 第四根线
              name: '通过x轴、y轴来直接制定标注线',
              yAxis: 200, // y轴和x轴只能给一个
              // xAxis: 100, // y轴和x轴只能给一个
            },
          ],
        },
        markArea: {
          data: [
            [
              {
                name: 'y轴300-400的标注范围',
                yAxis: 300,
              },
              {
                yAxis: 400
              }
            ],
            [
              {
                name: '两个坐标点之间的标注范围666',
                coord: [10, 450],
                itemStyle: {
                  color: 'pink'
                }
              },
              { coord: [50, 800] }
            ]
          ]
        }
      },
    })
  </script>
</body>
</html>